window.onload = function (){
    let selectBox = document.querySelector("#sel");
    for (let i = 0; i < 10; i++) {
        // let opt = document.createElement("option");
        // opt.innerText = `选项${i+1}`;
        // opt.value = i+1;
        // opt.selected = (i+1)==7;
        //JS 对于DOM元素 option 的创建 提供一个定义完整的 构造函数 Option
        //  可以直接通过 new Option(text,value,defaultSelected) 方式创建option元素对象
        //            => defaultSelected 标签会增加 selected， 但DOM无效果
        // let opt = new Option(`选项${i+1}`,i+1, (i+1)===7 );
        let opt = new Option(`选项${i+1}`,i+1);
        opt.selected = (i+1)===7;
        selectBox.appendChild(opt)
    }
}
function printSelectOptionValue(){
    // 下拉列表的选中项取值，通过 select DOM 对象的 value 直接进行加载即可
    let selDom = document.querySelector("#sel")
    console.log( selDom.value )
}
function changeSelectOption(){
    let selDom = document.querySelector("#sel")
    //下拉列表操作中 对 select DOM对象的value进行赋值，可以直接改变页面选中项的状态
    selDom.value = 3;
}
function printSelectOption(){
    let selDom = document.querySelector("#sel")
    // JS select DOM 对象相对普通DOM对象而言，多了两个属性
    // 当前下拉列表的所有 options 元素集合（类数组）
    console.log( selDom.options )
    // 在options 元素集合中存在一个非下标属性 selectedIndex , 表示当前选中的option下标
    console.log( selDom.options.selectedIndex )
    // selectedOptions 记录下拉列表被选中的 option
    console.log( selDom.selectedOptions )

    console.log("单选模式下被选中的option")
    console.log( selDom.options[ selDom.options.selectedIndex ] )
    console.log( selDom.selectedOptions[0] )
}
function printCellContent(){
    let tableDom = document.querySelector("#table");
    // js table DOM 提供 行数集合属性 rows ，基于行的顺序存储
    console.log( tableDom.rows )
    // js tr DOM 提供 单元格集合属性 cells ，基于行的顺序存储
    console.log( tableDom.rows[1].cells )
    console.log( tableDom.rows[1].cells[2].innerText )
}

// 可以通过构造器创建的 html 标签 => 【图片瀑布流】
let img = new Image(200,200);
img.src = "../assets/img/bg.jpg";
console.log( img );